import React, { useState } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { Form, Input, Button, Modal, Select, Row, Col, Popconfirm, message } from 'antd';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import columnsData, { columnsDataType } from './data'
import { getpdbIssuanceList } from './service'
import TableTitle from '../../components/TableTitle'
// 页面跳转
import { Link } from 'umi';
export default (props: any) => {
    const { Option } = Select;
    const { TextArea } = Input;
    // 上个页面传递过来的参数
    const { fromDashboard } = props.location.state
    // add模态框控制
    const [isAddModalVisible, setIsAddModalVisible] = useState(false);
    // 添加用户数据表单验证 获取表单
    const addFormRef: any = React.createRef();

    // 新增
    const addInfo = () => {
        setIsAddModalVisible(true);
    };

    // validateFields触发表单验证
    const handleAddOk = async () => {
        // 获取新增表单的值
        var reponse = addFormRef.current?.getFieldsValue()
        console.log(reponse);
        // 表单验证
        addFormRef.current.validateFields().then(() => {
            // 重置表单
            addFormRef.current.resetFields();
            // 关闭模态框
            setIsAddModalVisible(false)
        }).catch(() => { })
    }

    // 删除
    const confirmDel = () => {
        message.success('删除成功');
    }
    const cancelDel = () => {
        message.success('取消删除');
    }

    // 表头数据
    const columns: ProColumns<columnsDataType>[] = columnsData

    // 操作行数据 自定义操作行
    // text当前的值,foreach下面的执行完才有值 record当前行的全部数据 inde数组下标
    const actionRender: any = (text: any, record: any, index: number) =>
        <ul className="ant-list-item-action" style={{ margin: 0 }}>
            <li>
                <a>生效</a>
                <em className="ant-list-item-action-split"></em>
            </li>
            <li>
                <Popconfirm
                    title="是否删除此条数据"
                    okText="是"
                    cancelText="否"
                    onConfirm={confirmDel}
                    onCancel={cancelDel}
                >
                    <a>删除</a>
                </Popconfirm>
            </li>
        </ul>

    // 金额行数据 自定义靠右
    const moneyRender: any = (text: any, record: any, index: number) =>
        [<p key={record.id} style={{ textAlign: 'right', margin: 0 }}>{text}</p>]

    // 自定义数据的表格头部数据
    columns.forEach((item: any) => {
        item.dataIndex === 'action' ? item.render = actionRender : undefined
        item.dataIndex === 'pdbAmount' ? item.render = moneyRender : undefined
    });

    return (
        <div>
            {/* Pro表格 */}
            <ProTable<columnsDataType>
                headerTitle={<div>
                    <TableTitle title='折扣信息' />
                    <span style={{ marginLeft: 20 }}>当前折扣:{fromDashboard.effectiveDiscount}</span>
                    <span style={{ marginLeft: 20 }}>商户号:{fromDashboard.merchantNumber}</span>
                    <span style={{ marginLeft: 20 }}>商户名:{fromDashboard.merchantName}</span>
                </div>}
                bordered
                // 表头
                columns={columns}
                // 请求获取的数据
                request={
                    async params => getpdbIssuanceList(params)
                }
                rowKey="id"
                // 本地存储表格列的显示数据
                columnsState={{
                    persistenceKey: 'pro-table-singe-demos',
                    persistenceType: 'localStorage',
                }}
                // 搜索框配置
                search={{
                    labelWidth: 'auto',
                }}
                // 搜索表单的配置
                form={{
                    ignoreRules: false,
                }}
                pagination={{
                    pageSize: 5,
                }}
                dateFormatter="string"
                //设置工具栏按钮及事件
                toolBarRender={() => [
                    <div>
                        <Button key="add" icon={<PlusOutlined />} type="primary" onClick={addInfo}>
                            新增
                        </Button>
                        <Button key="back" type="primary" onClick={addInfo} style={{ marginLeft: 20 }}>
                            <Link to="/merchant">返回</Link>
                        </Button>
                    </div>
                ]}
            />
            {/* 新增模态框 */}
            <Modal
                title="折扣新增"
                centered
                visible={isAddModalVisible}
                onOk={handleAddOk}
                onCancel={() => setIsAddModalVisible(false)}
                okText="提交"
                width={700}>
                <Form
                    name="basic"
                    ref={addFormRef}
                    labelCol={{ span: 24 }}
                    wrapperCol={{ span: 24 }}
                    initialValues={{ state: 'effect' }}
                    autoComplete="off"
                >
                    <Row gutter={20}>
                        <Col span={8}>
                            <Form.Item
                                label="折扣编码"
                                name="discountCode"
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item
                                label="折扣创建日期"
                                name="creationDate"
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item
                                label="折扣状态"
                                name="state"
                            >
                                <Select style={{ width: 120 }}>
                                    <Option value="effect">生效</Option>
                                    <Option value="invalid">未生效</Option>
                                </Select>
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row gutter={20}>
                        <Col span={8}>
                            <Form.Item
                                label="折扣名称"
                                name="discountName"
                                rules={[
                                    {
                                        required: true,
                                        message: '不可为空'
                                    }
                                ]}
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item
                                label="折扣抵消条件"
                                name="offsetCondition"
                                rules={[
                                    {
                                        required: true,
                                        message: '不可为空'
                                    }
                                ]}
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item
                                label="折扣总比例"
                                name="totalProportion"
                                rules={[
                                    {
                                        required: true,
                                        message: '不可为空'
                                    },
                                    {
                                        pattern: /^(100|[1-9]?\d(\.\d\d?\d?)?)%$|0$/,
                                        message: '请输入正确的数值，单位%'
                                    }
                                ]}
                            >
                                <Input />
                            </Form.Item>
                        </Col>

                    </Row>
                    <Row gutter={20}>
                        <Col span={8}>
                            <Form.Item
                                label="会员享有比例"
                                name="memberEnjoyProportion"
                                rules={[
                                    {
                                        required: true,
                                        message: '不可为空'
                                    },
                                    {
                                        pattern: /^(100|[1-9]?\d(\.\d\d?\d?)?)%$|0$/,
                                        message: '请输入正确的数值，单位%'
                                    }
                                ]}
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item
                                label="平台享有比例"
                                name="platformEnjoyProportion"
                                rules={[
                                    {
                                        required: true,
                                        message: '不可为空'
                                    },
                                    {
                                        pattern: /^(100|[1-9]?\d(\.\d\d?\d?)?)%$|0$/,
                                        message: '请输入正确的数值，单位%'
                                    }
                                ]}
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item
                                label="推荐人享有比例"
                                name="refereeEnjoyProportion"
                                rules={[
                                    {
                                        required: true,
                                        message: '不可为空'
                                    },
                                    {
                                        pattern: /^(100|[1-9]?\d(\.\d\d?\d?)?)%$|0$/,
                                        message: '请输入正确的数值，单位%'
                                    }
                                ]}
                            >
                                <Input />
                            </Form.Item>
                        </Col>

                    </Row>
                    <Row gutter={20}>
                        <Col span={24}>
                            <Form.Item
                                label="备注"
                                name="remarks"
                            >
                                <TextArea rows={4} />
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </Modal>
        </div>
    );
};